<template>
    <el-affix>
        <el-header height="auto">
            <div class="search">
                <div style="display:flex;justify-content: space-between;align-items: center">
                    <div style="display:flex;align-items: center">
                        <el-text style="margin-right: 1em" ><h4>批次</h4></el-text>
                        <el-autocomplete clearable placeholder="请输入批次"
                                         v-model="searchForm.batch" :fetch-suggestions="querySearch"
                                         @change="search" @select="handleSelect"
                        />
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text style="margin-right: 1em" ><h4>名称</h4></el-text>
                        <el-input v-model="searchForm.name"
                                  placeholder="请输入项目名称,按回车确认"
                                  class="searchName"
                                  :prefix-icon="Search"
                                  @keydown.enter="search"/>
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text style="margin-right: 1em" ><h4>类型</h4></el-text>
                        <el-select
                            v-model="searchForm.types"
                            placeholder="请选择项目类型"
                            @change="search"
                        >
                            <el-option value="" label="全部"/>
                            <el-option value="创新训练项目"/>
                            <el-option value="创业训练项目"/>
                            <el-option value="创业实践项目"/>
                        </el-select>
                    </div>
                </div>
                <div style="margin-top: 1em;">
                    <el-collapse>
                        <el-collapse-item>
                            <template #title>
                                <el-text><h4>所属领域</h4></el-text>
                            </template>
                            <el-checkbox-group :max="3" size="" v-model="checkTags" @change="search" >
                                <el-checkbox-button v-for="tag in tags" :key="tag" :label="tag"/>
                            </el-checkbox-group>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div style="margin-top: 1em;display:flex;justify-content: space-between;align-items: center" >
                    <div style="display:flex;align-items: center">
                        <el-text ><h4 style="display:inline;margin-right: 1em">学校科技成果转化</h4></el-text>
                        <el-radio-group  v-model="searchForm.achievementIsTransform" @change="search">
                            <el-radio label="">全部</el-radio>
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text style="margin-right: 1em" ><h4>编号</h4></el-text>
                        <el-input v-model="searchForm.no"
                                  placeholder="请输入项目编号,按回车确认"
                                  class="searchName"
                                  :prefix-icon="Search"
                                  @keydown.enter="search"/>
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text style="margin-right: 1em" ><h4>发布日期</h4></el-text>
                        <el-date-picker
                            v-model="searchForm.date"
                            type="date"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            placeholder="搜索发布日期之后的"
                            :disabled-date="disabledDate"
                            :shortcuts="shortcuts"
                            size="default"
                            @change="search"
                        />
                    </div>
                </div>
            </div>
        </el-header>
    </el-affix>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";

import {Search} from "@element-plus/icons-vue";

import {getProjectListBySearchApi} from "@/apis/search";
import {getProjectBatches, getProjectTags} from "@/apis/enum";

const props = defineProps(["currentPage","pageSize","total","searchForm"])
const emits = defineEmits(["update:currentPage","update:pageSize","update:total",
    "update:projectList","update:loading","update:tags"])
//暂时同步获取,异步没有接口
//批次
const batches = ref(getProjectBatches())
// getBatchesApi().then((
//     res => batches.value = res
// ))
const querySearch = async (queryString, cb) => {
    const results = queryString
        ? batches.value.filter(createFilter(queryString))
        : batches.value
    cb(results)
}
const createFilter = (queryString) => {
    return (batch) => {
        return (
            batch.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
const handleSelect = item => {
    console.log(item)
}
const tags = ref(getProjectTags())
// getSearchTagsApi().then((
//     res => tags.value = res.data
// ))
//搜索领域数组,变化后需要更新表单tags字符串
let checkTags = ref([])
watch(checkTags,value => emits("update:tags",checkTags.value.join(",")))

const shortcuts = [
    {   text: '今天', value: new Date()   },
    {   text: '昨天', value: () => {
            let date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date}
    },
    {   text: '一周前', value: () => {
            let date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date}
    }]

//判断不能选中未来的日期
let disabledDate = time => {
    return time.getTime() > Date.now()
}
//搜索
const search = async () => {
    emits("update:loading",true)
    const res = await getProjectListBySearchApi(props.currentPage,props.pageSize,props.searchForm)
    emits("update:total",res.data.totalElements)
    emits("update:projectList",res.data.content)
    emits("update:loading",false)
}

onMounted(()=>search())
</script>

<style scoped lang="scss">

.el-header{
    padding: 1em 10%;
    background-color: white;
}

.searchName {
    width: 25em;
}

/*
    日期选择器
 */
.search{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    div{
        justify-content: space-between;
    }
}

:deep(.el-collapse-item__content){
    padding-bottom:0;
}

:deep(.el-form-item__label) {
    line-height: normal;
}

:deep(.el-checkbox-button .el-checkbox-button__inner) {
    border: 1px solid #DCDFE6;
    margin: 0 1em 1em 0;
    border-radius: 4px;
}

:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
    border: 1px solid #409EFF;
}

</style>